<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org"
	xmlns:tiles="http://www.thymeleaf.org"
	xmlns:sec="http://www.thymeleaf.org" lang="en">

<head>

<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- This <head> section is only used for static prototyping purposes. At runtime, -->
<!-- Tiles will only use the body fragment defined with tiles:fragment="content",  -->
<!-- as specified at the corresponding views.xml file.                             -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->

<title>SAR: Sistema de Atención de Requerimientos</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<link rel="stylesheet" type="text/css" media="screen, projection"
	href="../static/styles/blueprint/screen.css" />

<link rel="stylesheet" type="text/css" media="print"
	href="../static/styles/blueprint/print.css" />

<link rel="stylesheet" type="text/css" media="screen" href="../static/styles/booking.css" />

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" th:src="@{/resources/demos/style.css}"/>
<script>
  $(function() {  
    $( "#from" ).datepicker({
      dateFormat: "dd/mm/yy",
      onClose: function( selectedDate ) {
        $( "#to" ).datepicker( "option", "minDate", selectedDate );
      }
    });
    $( "#to" ).datepicker({
      dateFormat: "dd/mm/yy",
      onClose: function( selectedDate ) {
        $( "#from" ).datepicker( "option", "maxDate", selectedDate );
      }
    });
  });
</script>

<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  -->
<!-- Some styles and scripts are served from spring-js-resources-{ver}.jar at -->
<!-- runtime. Therefore not available for static prototyping. See the         -->
<!-- layouts/standard.html template file for detail.                          -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  -->
</head>

<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- START of the content to be included in the execution result.  -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- Only the markup inside this <body> would be required in this  -->
<!-- template if no static prototyping was intended.               -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<body tiles:fragment="content">
 
 	<div>
 		<div class="box">
<!-- 			<a href='/consultarSolicitudes' th:href="@{/consultarSolicitudes}" -->
<!-- 			 th:text="#{consultarSolicitudes.busquedadesolicitudes}">Búsqueda de Solicitudes</a> -->
<!-- 			>  -->
			<h6 th:text="#{registrarSolicitud.registro}" th:unless="${modoConsulta}">Registro de Solicitud</h6>
			<h6 th:text="#{registrarSolicitud.consulta}" th:if="${modoConsulta}">Consulta de Solicitud</h6>
		</div>
		<hr />
		
		<h2 th:text="#{registrarSolicitud.titulo}">Registro de Solicitud de Servicio</h2>

		<div>
			<form name="registrarSolicitud" action="#" th:object="${solicitud}" th:action="@{/registrarSolicitud}"
				method="post" class="inline" enctype="multipart/form-data">

				<div class="error" th:if="${#fields.hasErrors('*')}">
                  <span th:each="err : ${#fields.errors('*')}">
                  <span th:text="${err}">Entrada incorrecta</span><br />
                  </span>
           	    </div>	
           	    <div class="success" th:if="${confirmaRegistro}">
                  <span th:text="#{registrarSolicitud.solicitudRegistrada}">Solicitud Registrada</span><br />
           	    </div>			
				<fieldset>
				<legend th:text="#{registrarSolicitud.datosBasicos}"> Datos basicos</legend>
					<div class="span-4">
						<label for="areaSolicitante" th:text="#{consultarSolicitudes.areaSolicitante}">Area solicitante:</label>						
					</div>
					<div class="span-3 append-1">
						<select th:field="*{areaSolicitante.id}" th:attr="disabled=${modoConsulta}">					
						<option th:each="area : ${allAreas}" 
						        th:value="${area.id}" 
						        th:text="${area.nombre}">AreaSolicitante</option>
						</select>
					</div>
					<div class="span-4">
						<label th:text="#{registrarSolicitud.fechaEsperada}" for="from">Fecha esperada:</label>
					</div>
					<div class="span-3 last">
						<input type="text" id="fechaDP" name="fechaDP" th:field="*{fechaEsperada}" th:attr="disabled=${modoConsulta}"/>	
					</div>
					<div class="span-4">
						<label for="tipoRequerimiento" th:text="#{registrarSolicitud.tipoRequerimiento}">Tipo de Requerimiento:</label>						
					</div>
					<div class="span-3 append-1">
						<select th:field="*{tipoRequerimiento.id}" th:attr="disabled=${modoConsulta}">
						<option th:each="tipoRequerimiento : ${allTipoRequerimientos}" 
						        th:value="${tipoRequerimiento.id}" 
						        th:text="${tipoRequerimiento.nombre}">Tipo de Requerimiento</option>
						</select>
					</div>
					<div class="span-4">
						<label th:text="#{registrarSolicitud.numero}">Número de Solicitud </label>
					</div>
					<div class="span-3 last">
						<input type="text" id="id" th:field="*{id}" disabled="true"/>
					</div>
					</fieldset>
					<fieldset>
					<legend>Preguntas referenciales</legend>
					<div class="span-16">
						<p>
							<span th:text="#{registrarSolicitud.desc1}">Desc1 </span><br/>
							<textarea class="span-16" id="desc1" th:field="*{desc1}" th:attr="disabled=${modoConsulta}"/><br/>
						</p>
							<p>
						<span th:text="#{registrarSolicitud.desc2}">Desc2 </span><br/>
							<textarea class="span-16" id="desc2" th:field="*{desc2}" th:attr="disabled=${modoConsulta}"/><br/>
						</p>
						<p>
							<span th:text="#{registrarSolicitud.desc3}">Desc3 </span><br/>
							<textarea class="span-16" id="desc3" th:field="*{desc3}" th:attr="disabled=${modoConsulta}"/><br/>
						</p>
						<p>
							<span th:text="#{registrarSolicitud.desc4}">Desc4 </span><br/>
							<textarea class="span-16" id="desc4" th:field="*{desc4}" th:attr="disabled=${modoConsulta}"/><br/>
						</p>
						<p>
							<span th:text="#{registrarSolicitud.desc5}">Desc5 </span><br/>
							<textarea class="span-16" id="desc5" th:field="*{desc5}" th:attr="disabled=${modoConsulta}"/><br/> 
		                </p>
	                </div>
	                </fieldset>
	                <fieldset>
	                <legend>Anexos</legend>
	                <div class="span-8" th:unless="${modoConsulta}">
	                <div>
	                	<input type='checkbox' class="pChk"	id="pChk" th:field="*{flagAdjuntar}" />
						<label th:text="#{registrarSolicitud.adjuntarArchivos}" for="pChk">Adjuntar Archivos</label>						
					</div>
					<div>
						<span id="adjuntaArchivo" class="adjuntaArchivo" style="display: none;">
								<p th:text="#{registrarSolicitud.avisoArchivo}"> El tamaño máximo de los archivos es de 2 MB</p>		
								<input type="file" th:field="*{archivoAux}" />							
						</span>					
						<script type="text/javascript">
						$(document).ready(function(){
						    $('#pChk').change(function(){
						        if(this.checked)
						            $('#adjuntaArchivo').fadeIn('fast');
						        else
						            $('#adjuntaArchivo').fadeOut('fast');

						    });
						});
						</script>
					</div>
	                </div>
	                <div class="span-8" th:if="${modoConsulta}">
	                <div>
						<label th:text="#{registrarSolicitud.archivoAdjunto}">Archivo adjunto</label>
						<input type="text" th:field="*{archivo.nombre}" disabled="true"/>
					</div>
	                </div>
	                <script th:inline="javascript">
					//<![CDATA[
					  $(function() {
					    $( "#registrar" ).dialog({
					      autoOpen: false,
					      resizable: false,
					      height:200,
					      width: 350,
					      draggable: false,
					      modal: true,
					      buttons: {
					        "Si": function() {
					        	document.registrarSolicitud.submit();
	
					        },
					        "No": function() {
					          $( this ).dialog( "close" );
					        }
					      }
					    });
					    $( "#openerRegistrar" ).click(function() {
					        $( "#registrar" ).dialog( "open" );
					      });
					  });
					//]]>
				    </script>
				    <div id="registrar" th:title="#{programarSolicitudes.registrarTitulo}">
						<p th:text="#{registrarSolicitud.registrar}" >¿Esta seguro de querer cancelar sin registrar la informacion?</p>
				    </div>					
				</fieldset>
				<button type="button" id="openerRegistrar" th:value="#{general.registrar}" th:unless="${modoConsulta}">Registrar</button>
			</form>		
		</div>
		
				<div th:unless="${modoConsulta}">
				<script th:inline="javascript">
				//<![CDATA[
				  $(function() {
				    $( "#cancelar" ).dialog({
				      autoOpen: false,
				      resizable: false,
				      height:200,
				      width: 350,
				      draggable: false,
				      modal: true,
				      buttons: {
				        "Si": function() {
				        	window.location = /*[[@{/consultarSolicitudes}]]*/ };

				        },
				        "No": function() {
				          $( this ).dialog( "close" );
				        }
				      }
				    });
				    $( "#openerCancelar" ).click(function() {
				        $( "#cancelar" ).dialog( "open" );
				      });
				  });
				//]]>
				  </script>
				  <div id="cancelar" th:title="#{programarSolicitudes.cancelarTitulo}">
					<p th:text="#{registrarSolicitud.cancelar}" >¿Esta seguro de querer cancelar sin registrar la informacion?</p>
				  </div>
				<button type="button" class="button negative" id="openerCancelar" th:value="#{general.cancelar}">Cancelar</button>							 
				</div>
				<div th:if="${modoConsulta}">			
				<form th:action="@{/consultarSolicitudes}" >
					<button type="submit" th:value="#{registrarSolicitud.botonVolver}">Volver</button>
				</form>								
				</div> 
			</div>
</body>
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<!-- END of the content to be included in the execution result -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->

</html>
